/*color*/
$--color-sub-primary: #7dbbed; /*次要颜色*/
$--color-success: #79d5ac; /*成功颜色*/
$---html-background-color: hsl(0deg 0% 96%); /*html 背景颜色*/

/*header*/
$--app-header-height: 46px; /*header高度*/

/*menu*/
$--app-menu-width: 210px; /*app 左侧菜单宽度*/
$--app-menu-height: 40px; /*菜单高度*/
$--app-menu-width-is-collapse: 65px;

/*nav bar*/
$--app-nav-tag-border-color: #dddedf; /*nav边框*/
$--app-nav-height: 34px; /*导航栏高度*/
$--app-nav-background-color: #fff; /*导航栏背景颜色  f9f9f9*/
$--app-nav-item-background-color-active: $--color-primary; /*tag 选中时背景颜色*/
$--app-nav-item-background-color-inactive: #fff; /*tag 未选中时背景颜色*/

/*footer*/
$--app-footer-height: 45px;

.layout--mandala {
  .g-layout-mandala {
    @mixin g-app__header-right() {
      display: flex;
      .g-icon-refresh__wrap {
        @include flex-vertical-center($--app-header-height);
        .el-icon-refresh {
          font-size: 18px;
          padding: 0 20px;
          cursor: pointer;
          vertical-align: middle;
          @include flex-vertical-center($--app-header-height);
        }
        .icon-refreshing {
          animation: spin 600ms infinite linear;
          animation-play-state: running;
        }
      }
      .g-full-screen-wrap {
        .el-icon-full-screen {
          font-size: 18px;
          cursor: pointer;
          color: #fff;
          @include flex-vertical-center($--app-header-height);
        }
      }
      .g-version__wrap {
        padding: 0 0 0 10px;

        span {
          font-size: 12px;
          font-style: italic;
          white-space: nowrap;
        }

        &:before {
          position: relative;
          top: 2px;
        }
      }
      .g-avatar__wrap {
        height: 100%;
        @include flex-vertical-center($--app-header-height);
        font-size: 14px;
        margin-left: 12px;
        color: #fff;
        span:first-child {
          cursor: pointer;
          @include flex-vertical-center($--app-header-height);
          .g-avatar {
            font-size: 26px;
            margin: 0 10px 0 0;
            vertical-align: middle;
          }
        }
      }
      .g-el-icon-setting {
        font-size: 18px;
        color: #fff;
        @include flex-vertical-center($--app-header-height);
        padding: 0 10px;
        cursor: pointer;
      }
    }
    display: flex;
    flex-direction: column;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    background: $---html-background-color !important;
    .g-app__header {
      flex-shrink: 0;
    }
    .g-layout-mandala--body {
      flex: 1;
      display: flex;
      .mandala--body-rt {
        width: calc(100% - #{$--app-menu-width});
        flex: 1;
        display: flex;
        flex-direction: column;
      }
    }

    .g-app__header {
      background: $--color-primary;
      height: $--app-header-height;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 20px;
      color: #fff;
      box-sizing: border-box;
      //border-bottom: 1px solid rgb(64, 101, 190);
      //box-shadow: 0 1px 10px 0 $--color-primary;
      position: relative;
      z-index: 999;
      .g-app__header-lt {
        display: flex;
        align-items: center;
        min-width: calc(#{$--app-menu-width} - 10px);
        .g-app__header-title {
          font-size: 16px;
          color: #fff;
          margin-left: 16px;
          user-select: none;
          letter-spacing: 1px;
          font-variant: tabular-nums;
          font-family: 'Roboto', sans-serif;
          font-weight: bold;
          font-feature-settings: 'tnum';
        }
      }
      .g-app__header-ct {
        flex: 1;
        display: flex;
        .g-el-icon-s {
          background: rgba(255, 255, 255, 0.1);
          padding: 3px 8px;
          border-radius: 4px;
          cursor: pointer;
          &:hover {
            background: rgba(255, 255, 255, 0.3);
          }
        }
      }
      .g-app__header-rt {
        display: flex;
        align-items: center;
        height: 100%;
        @include g-app__header-right();
        .g-avatar__wrap {
          line-height: $--app-header-height;
          .avatar-slot {
            display: flex;
            align-items: center;
            height: 100%;
            color: #ffffff;
            img {
              height: 30px;
              width: 30px;
            }
            .username {
              padding: 0 8px;
            }
          }
        }
      }
    }

    .g-app__menu {
      width: $--app-menu-width;
      flex-shrink: 0;
      box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.1);
      background: #fff;
      box-sizing: border-box;
      overflow: hidden;
      position: relative;
      z-index: 100;
      .g-app__menu-child {
        overflow: hidden auto;
        height: calc(100vh - #{$--app-header-height});
        width: calc(#{$--app-menu-width} + 17px);
        box-sizing: border-box;
        padding: 5px 0 10px 0;
        .g-app__menu-container {
          width: $--app-menu-width;
          padding: 0 10px;
          box-sizing: border-box;
          user-select: none;
          border-right: none;
          .el-menu {
            border: none;

            .menu_1-item {
              padding-left: 8px !important;
            }
            .menu_1 {
              .el-submenu__title {
                padding-left: 8px !important;
              }
            }

            .menu_2-item {
              padding-left: 28px !important;
            }
            .menu_2 {
              .el-submenu__title {
                padding-left: 28px !important;
              }
            }

            .menu_3-item {
              padding-left: 48px !important;
            }
            .menu_3 {
              .el-submenu__title {
                padding-left: 48px !important;
              }
            }

            .menu_4-item {
              padding-left: 48px !important;
            }
            .menu_4 {
              .el-submenu__title {
                padding-left: 48px !important;
              }
            }
          }
          .el-submenu__title,
          .el-menu-item {
            z-index: 1;
            height: $--app-menu-height;
            line-height: $--app-menu-height;
            position: relative;
            color: #333;
            margin: 7px 0 0;
            border-radius: 5px;
            box-sizing: border-box;
            min-width: auto;
          }

          i,
          .el-submenu__icon-arrow,
          .el-icon-arrow-down {
            color: $--color-primary;
            right: 15px;
          }

          /*父菜单*/
          .el-submenu {
            .el-submenu__icon-arrow,
            .el-icon-arrow-down {
              font-weight: bold;
              margin-top: -4px;
            }

            /*二级/三级菜单背景颜色*/
            .el-submenu__title {
              transition: none;
              position: relative;
              &:hover {
                color: #fff;
                i {
                  color: #fff;
                }
                &::before {
                  content: '';
                  position: absolute;
                  width: 100%;
                  height: 100%;
                  background: $--color-primary;
                  z-index: -1;
                  border-radius: 5px;
                  left: 0;
                }
              }
            }
            /*激活*/
            &.is-active {
              & > .el-submenu__title {
                color: $--color-primary;
                i {
                  color: $--color-primary;
                }
                &:hover {
                  color: #fff;
                  i {
                    color: #fff;
                  }
                  &::before {
                    content: '';
                    position: absolute;
                    width: 100%;
                    height: 100%;
                    background: $--color-primary;
                    z-index: -1;
                    border-radius: 5px;
                    left: 0;
                  }
                }
              }
            }
          }

          /*子菜单*/
          .el-menu-item {
            // 自己修改element ui样式
            transition: none;
            &.is-active {
              color: #fff;
              background: $--color-primary;
              i {
                // 图标
                color: #fff;
                font-weight: bold;
              }
            }
            &:hover {
              color: #fff;
              i {
                color: #fff;
              }
              &::before {
                content: '';
                position: absolute;
                width: 100%;
                height: 100%;
                background: $--color-primary;
                z-index: -1;
                border-radius: 5px;
                left: 0;
              }
            }
          }
        }
        .el-menu--collapse {
          .el-submenu.is-active {
            & > .el-submenu__title {
              i {
                // 图标
                color: $--color-primary;
                font-weight: bold;
              }
            }
          }
        }
      }
    }

    /*标签样式*/
    .g-app__nav {
      margin-bottom: 6px;
      &.g-nav-tag {
        display: flex;
        justify-content: space-between;
        align-items: center;
        z-index: 50;
        position: relative;
        background: $--app-nav-background-color;
        height: $--app-nav-height;
        .contextmenu {
          border: 1px solid $--app-nav-tag-border-color;
          .g-nav-contextmenu-divide {
            background: $--app-nav-tag-border-color;
          }
        }
        .el-button {
          background-color: #fff;
          width: 28px;
          height: 100%;
          top: 0;
          display: flex;
          align-items: center;
          justify-content: center;
          .el-icon-arrow-left,
          .el-icon-arrow-right {
            color: #222;
            font-size: 16px;
            font-weight: bold;
          }
        }
        .left__icon {
          position: absolute;
          left: 0;
          z-index: 10;
        }
        .contextmenu {
          user-select: none;
          margin: 0;
          padding: 5px 0;
          background: #fff;
          list-style-type: none;
          border-radius: 4px;
          position: absolute;
          z-index: 999;
          font-size: 12px;
          box-shadow: 2px 4px 3px 0 rgba(0, 0, 0, 0.3);
          .g-nav-contextmenu-divide {
            width: 100%;
            height: 1px;
            margin: 4px 0;
          }
          li {
            margin: 0;
            display: flex;
            height: 28px;
            align-items: center;
            min-width: 100px;
            padding: 0 20px 0 10px;
            cursor: pointer;
            white-space: nowrap;
            i {
              font-size: 12px;
              padding-right: 8px;
            }
            &:hover {
              background: #eee;
            }
          }
        }
        .right__icon {
          position: absolute;
          right: 0;
          display: flex;
          height: 100%;
          align-items: center;
          top: 0;
          .dropdown__menu {
            width: 32px;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            border-left: 1px solid #f0f0f0;
            background-color: #fff;
            .el-icon-circle-close {
              font-size: 19px;
            }
          }
        }
        .scroll-outer {
          flex: 1;
          box-sizing: border-box;
          height: 32px;
          position: absolute;
          left: 28px;
          right: 61px;
          top: 0;
          overflow: visible;
          .scroll-body {
            font-size: 0;
            height: 55px;
            padding: 3px 5px;
            white-space: nowrap;
            transition: 0.4s ease all;
            .nav-tag__item + .nav-tag__item {
              margin-left: 5px;
            }
            .nav-tag__item {
              box-sizing: border-box;
              background: $--app-nav-item-background-color-inactive;
              border: 1px solid $--app-nav-tag-border-color;
              color: #515a6e;
              height: 26px;
              line-height: 26px;
              text-align: center;
              position: relative;
              display: inline-block;
              padding: 0 0 0 14px;
              cursor: pointer;
              border-radius: 3px;
              user-select: none;
              transition: padding 0.4s ease;
              font-size: 0;
              i {
                font-size: 14px;
                color: rgb(227, 229, 231);
              }
              .icon-dot {
                transition: background 0.2s ease;
                display: inline-block;
                width: 8px;
                height: 8px;
                margin-right: 8px;
                border-radius: 50%;
                background: #e8eaec;
                position: relative;
                vertical-align: middle;
              }
              //.no-close-icon {
              //  vertical-align: middle;
              //  margin: 0 7px;
              //}
              .el-icon-close {
                margin-left: 7px;
                border-radius: 50%;
                opacity: 0;
                transition: 0.41s ease;
                vertical-align: middle;
                display: inline-block;
                font-size: 12px;
                //color: #333;
                color: #fff;
                padding: 1px;
                &:hover {
                  background-color: $--color-primary;
                  color: #fff !important;
                }
              }
              .nav-item__label {
                display: inline-block;
                width: fit-content;
                white-space: nowrap;
                font-size: 12px;
                vertical-align: middle;
              }
              &:hover {
                padding-right: 12px;
                color: #515a6e;
                .el-icon-close {
                  opacity: 1;
                  color: #515a6e;
                }
              }
            }
            .nav-tag__item--active {
              padding-right: 10px;
              color: #fff;
              background: $--app-nav-item-background-color-active;
              .icon-dot {
                background: #fff;
              }
              &:hover {
                .el-icon-close {
                  color: #fff;
                }
              }
              .el-icon-close {
                opacity: 1;
                color: #fff;
                &:hover {
                  background-color: transparent;
                  color: #fff !important;
                }
              }
              &:hover {
                padding-right: 12px;
                color: #fff;
                .icon-dot {
                  background: #fff;
                }
                i {
                  color: #fff;
                }
                .el-icon-close {
                  opacity: 1;
                }
              }
            }
            .nav-tag__item--home {
              padding-right: 18px !important;
            }
          }
        }
      }
    }

    .mandala--body-lt {
      width: $--app-menu-width;
      transition: 0.3s;
      &.g-app__menu-is-collapse {
        width: $--app-menu-width-is-collapse;
        background: #fff;
        box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.1);
        .g-app__menu-container {
          width: $--app-menu-width-is-collapse;
          .g-app__menu-child,
          .el-menu {
            width: auto !important;
            border-right: none;

            [class^='iconfont-pc op-icon-'] {
              margin-right: 0;
            }

            .menu_1-item {
              padding: 0 !important;
              text-align: center;
              .el-tooltip {
                padding: 0 !important;
              }
              &.is-active {
                background: $--color-primary;
                color: #fff;
                i {
                  color: #fff;
                }
              }
            }
            .menu_1 {
              border-radius: 5px;
              .el-submenu__title {
                padding: 0 !important;
                text-align: center;
              }
              &.is-active {
                color: #fff;
                background: $--color-primary;
                i {
                  color: #fff !important;
                }
              }
            }
          }
        }
      }
    }

    .main__content {
      overflow: hidden auto;
      height: calc(100vh - #{$--app-header-height} - #{$--app-nav-height} - 45px);
      box-sizing: border-box;
      padding: 4px 12px 0;
      position: relative;
      width: 100%;
      .router-view {
        min-height: inherit;
        border-radius: 3px;
        //box-shadow: 3px 3px 6px 0 rgba(0, 0, 0, 0.1);
        box-sizing: border-box;
        position: relative;
      }
    }
  }

  /*menu弹出框*/
  .el-menu--popup {
    padding: 7px 0;
    .el-submenu,
    .el-menu-item {
      z-index: 1;
      height: $--app-menu-height;
      line-height: $--app-menu-height;
      position: relative;
      color: #333;
      margin: 0 10px;
      border-radius: 5px;
      box-sizing: border-box;
      min-width: auto;
      .el-submenu__icon-arrow {
        margin-top: -5px;
      }
    }

    .el-submenu + .el-submenu .el-menu-item + .el-menu-item,
    .el-menu-item + .el-submenu,
    .el-submenu + .el-menu-item {
      margin: 7px 10px;
    }

    .el-submenu {
      padding: 0 !important;
      &.is-active {
        color: $--color-primary;
        .el-submenu__title {
          color: $--color-primary;
          & > i {
            color: $--color-primary;
          }
        }
      }
      .el-submenu__title {
        border-radius: 5px;
        height: $--app-menu-height;
        line-height: $--app-menu-height;
        padding: 0 10px !important;
        &:hover {
          background: $--color-primary;
          color: #fff;
          & > i {
            color: #fff;
          }
        }
      }
    }
    .el-menu-item {
      padding: 0 10px !important;
      &.is-active {
        background: $--color-primary;
        color: #fff !important;
        i {
          color: #fff;
        }
      }
      &:hover {
        background: $--color-primary;
        color: #fff;
        i {
          color: #fff;
        }
      }
    }
  }
}
